<template>
  <mt-popup
    v-model="visible"
    position="bottom"
    class="pay-layer">
    <i class="close" @click="visible = false"></i>
    <h2>充值中心</h2>
    <ul>
      <li v-for="item in list" @click="selectPayItem(item)" :class="{active: price === item}">
        {{item}}熙币 <br>{{item}}元

      </li>
      <li style="padding-top: 0;" @click="selectPayItem()">
        <input type="input" v-model.trim="other" maxlength="6" placeholder="其它数量">
      </li>
    </ul>
    <p class="recharge-money">实付金额：<em>{{calcPrice}}元</em>（{{calcPrice}}熙币）</p>
    <button class="recharge-submit" @click="goPay">确认充值</button>
  </mt-popup>
</template>
<script>
  import { Popup } from 'mint-ui'
  export default {
    data () {
      return {
        visible: false,
        price: 0,
        list: [10, 50, 100, 500, 1000],
        other: ''
      }
    },
    methods: {
      close () {
        this.other = ''
        this.price = 0
      },
      showToggle () {
        this.visible = !this.visible
      },
      selectPayItem (price) {
        if (price) {
          this.other = ''
          this.price = price
        } else {
          this.price = 0
        }
      },
      goPay () {
        let price = this.calcPrice
        if (price < 1) {
          this.$message.error('请输入大于一元的整数!')
          return
        }
        this.$http.post('/index/mobilepay/getPayParameter', {price})
          .then(({data}) => {
            return this.$http.post('/index/mobilepay/saveOrder', {price}).then(() => {
              this.$nextTick(() => {
                this.form_submit(data)
              })
            })
          })
      },
      form_submit (data) {
        let from = document.createElement("form");
        from.setAttribute("method", 'post');
        from.setAttribute("action", 'https://tech.zitopay.com/service/toPayCheckstand');
        for (let key in data) {
          let input = document.createElement("input");
          input.setAttribute("type", "hidden");
          input.setAttribute("name", key);
          input.setAttribute("value", data[key]);
          from.appendChild(input)
        }
        document.body.appendChild(from)
        from.submit()
      }
    },
    computed: {
      calcPrice () {
        if (/^[1-9]\d*$/.test(this.other)) {
          return this.other
        }
        if (this.price > 0) {
          return this.price
        }
        return 0
      }
    },
    components: {
      'mt-popup': Popup
    }
  }
</script>
<style lang="scss">
  @import "../assets/scss/helper/mixin";

  .pay-layer {
    width: 100%;
    padding: 15px;
    background-color: #f3f3f3;
    text-align: center;
    ul {
      @extend .clearfix;
    }
    li {
      float: left;
      width: 31%;
      background-color: #ffffff;
      border-radius: 3px;
      color: #666;
      height: 60px;
      border: 1px solid #828282;
      margin-top: 15px;
      padding-top: 5px;
      &:nth-child(3n - 1) {
        margin-left: 3.5%;
        margin-right: 3.5%;
      }
    }
    input {
      display: block;
      width: 100%;
      text-align: center;
      height: 100%;
      border: none;
    }
    .active {
      border-color: #a98a5e;
      box-shadow: 0 0 5px #a98a5e;
    }
    h2 {
      font-size: 18px;
      line-height: 36px;
    }
    .close {
      position: absolute;
      background: url("../assets/img/close_icon1.png") center / contain no-repeat;
      width: 15px;
      height: 15px;
      right: 15px;
      top: 15px;
    }
  }

  .recharge-money {
    text-align: left;
    color: #666666;
    line-height: 50px;
  }

  .recharge-submit {
    width: 100%;
    height: 36px;
    background-image: linear-gradient(#a98a5e, #b89564);
    color: #ffffff;
    border-radius: 3px;
  }

</style>
